<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
            }
            ul{
                list-style: none;
            }
            #tab{
                width: 480px;
                margin: 20px auto;
                border: 1px solid red;
            }
            ul{
                width: 100%;
                overflow: hidden;
            }
            ul li{
                float: left;
                width: 160px;
                height: 60px;
                line-height: 60px;
                text-align: center;
                background-color: #cccccc;
            }
            
            ul li a{
                text-decoration: none;
                color:black;
            }
            li.active{
                background-color: red;
            }
            p{
                display: none;
                height: 200px;
                text-align: center;
                line-height: 200px;
                background-color: red;
            }
            p.active{
                display: block;
                
            }
            
        </style>
    </head>
    <body>
        <div id="tab">
            <ul>
                <li class="active">
                    <a href="#">首页</a>
                </li>
                <li>
                    <a href="#">新闻</a>
                </li>
                <li>
                    <a href="#">图片</a>
                </li>        
            </ul>
            <p class="active">首页内容</p>
            <p>新闻内容</p>
            <p>图片内容</p>
            
            
        </div>
    </body>
    <script type="text/javascript">
        

        //变量提升
        /*
        var a
        console.log(a);
        a = 2;
        console.log(a);
        */
        /*
        var a;
        console.log(a);
        {
             a = 3;
            console.log(a);
        }
        console.log(a);
        */

        
        var olis = document.getElementsByTagName('li');
        var oPs = document.getElementsByTagName('p');

        var i;
        for(i = 0; i < olis.length; i++){


            olis[i].index = i;


            olis[i].onclick = function() {

                for(var j = 0; j < olis.length; j++){
                    olis[j].className = '';
                    oPs[j].className = ''
                }
                
                this.className = 'active';
                 // olis[this.index].className = 'active';


                 oPs[this.index].className = 'active';
            }

        }
      

    </script>
</html>